<template>
  <div class="repair-s">
    <div class="main_title">
      <el-tabs v-model="firstType" @tab-click="handleClick">
        <el-tab-pane :name="item.id" v-for="item in boardTabsData" :key="item.id">
          <span slot="label">{{ item.name }}</span>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="main_con" v-if="pageShow">
      <repair-list
        v-if="firstType === '0' || firstType === '1'"
        :userType="userType"
        :firstType="firstType"></repair-list>
      <repair-statistics v-else :userType="userType" :firstType="firstType"></repair-statistics>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import repairList from './components/repairList'
import repairStatistics from './components/repairStatistics'
export default {
  name: 'repairS',
  components: {
    repairList,
    repairStatistics,
  },
  props: {},
  data() {
    return {
      boardTabsData: [],
      firstType: '0',
      userType: '1', // 1.工作人员；2.负责人；3.审批人员；
      tabArr: [
        { name: '报修表单', id: '0' },
        { name: '报修审核', id: '1' },
        { name: '统计汇总', id: '2' },
      ],
      pageShow: false,
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isOrgRole', 'isRepairRole']),
  },
  created() {},
  mounted() {
    const arr = []
    if (this.isOtherRole || this.isNormalRole) {
      arr.push(this.tabArr[0])
      this.userType = '1'
    }
    if (this.isOrgRole) {
      arr.push(...this.tabArr)
      this.userType = '2'
    }
    if (this.isRepairRole) {
      arr.push(this.tabArr[1], this.tabArr[2])
      this.userType = '3'
    }
    this.boardTabsData = Array.from(new Set(arr.map(JSON.stringify))).map(JSON.parse)

    if (this.$route.query.id && this.$route.query.flag === '1') {
      this.firstType = '1'
    } else {
      this.firstType = this.boardTabsData[0].id
    }
    this.pageShow = true
  },
  methods: {
    handleClick(item) {},
  },
}
</script>
<style lang="scss" scoped>
.repair-s {
  height: 100%;
  width: 100%;
  .main_title {
    height: 50px;
    border-bottom: 1px solid #fff;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 0 20px;
  }
  .main_con {
    height: calc(100% - 50px);
  }
}
</style>
